<template>
	<el-main>
		<el-row :gutter="15">
			<el-col :lg="12">
				<data-card title="销售额" :data="sellData" unit="元"></data-card>
			</el-col>
			<el-col :lg="12">
				<data-card title="订单量" :data="orderData" unit="单"></data-card>
			</el-col>
		</el-row>

		<el-row :gutter="15">
			<el-col :lg="6">
				<div class="function-card">
					<a href="#/user/index">
						<el-icon
							style="
								font-size: 28px;
								margin-top: 20px;
								color: #66b1ff;
							"
						>
							<component :is="iconData.userIcon"
							/>
						</el-icon>
						<p style="margin-top: 8px; font-size: 14px">用户管理</p>
					</a>
				</div>
			</el-col>
			<el-col :lg="6">
				<div class="function-card">
					<a href="#/goods/index">
						<el-icon
							style="
								font-size: 28px;
								margin-top: 20px;
								color: #f56c6c;
							"
						>
							<component :is="iconData.shoppingIcon"
							/>
						</el-icon>
						<p style="margin-top: 8px; font-size: 14px">商品管理</p>
					</a>
				</div>
			</el-col>
			<el-col :lg="6">
				<div class="function-card">
					<a href="#/order/index">
						<el-icon
							style="
								font-size: 28px;
								margin-top: 20px;
								color: #f56c6c;
							"
						>
							<component :is="iconData.orderIcon"
							/>
						</el-icon>
						<p style="margin-top: 8px; font-size: 14px">订单管理</p>
					</a>
				</div>
			</el-col>
			<el-col :lg="6">
				<div class="function-card">
					<a href="#/refund/index">
						<el-icon
							style="
								font-size: 28px;
								margin-top: 20px;
								color: #67c23a;
							"
						>
							<component :is="iconData.recordIcon"
							/>
						</el-icon>
						<p style="margin-top: 8px; font-size: 14px">售后订单</p>
					</a>
				</div>
			</el-col>
		</el-row>

		<el-row :gutter="15" style="margin-top: 20px">
			<el-col :lg="24">
				<el-card shadow="never" style="width: 100%">
					<scEcharts height="300px" :option="orderOption"></scEcharts>
				</el-card>
			</el-col>
		</el-row>
	</el-main>
</template>

<script>
import dataCard from "@/components/datacard";
import scEcharts from "@/components/scEcharts";

export default {
	name: "home",
	components: {
		dataCard,
		scEcharts,
	},
	data() {
		return {
			iconData: {
				userIcon: "el-icon-UserFilled",
				setIcon: "el-icon-Cloudy",
				shoppingIcon: "el-icon-shopping-cart",
				orderIcon: "el-icon-List",
				boxIcon: "el-icon-Cellphone",
				recordIcon: "el-icon-Collection",
				payIcon: "el-icon-money",
				smsIcon: "el-icon-ChatLineSquare",
			},
			option2: {},
			option3: {},
			sellData: {},
			pvData: {},
			orderData: {},
			userData: {},
			orderDateLine: [],
			numberData: [],
			amountData: [],
			regData: [],
			orderOption: {},
			userOption: {}
		};
	},
	mounted() {
		this.getHomeData()
	},
	methods: {
		async getHomeData() {

		},
		// 订单数据
		initOrderRank() {
			this.orderOption = {
				title:{
					show: true,
					text: "近15天订单数据",
				},
				legend: {
					data: ['订单金额', '订单笔数']
				},
				color: ['#F56C6C', '#66B1FF'],
				grid: {
					left: '2%',
					right: '2%',
					bottom: '3%',
					containLabel: true
				},
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'line'
					},
				},
				xAxis: {
					type: 'category',
					data: this.orderDateLine,
					axisLine: {
						show: false
					}
				},
				yAxis: {
					type: 'value',
					axisLine: {
						show: false
					},
					axisTick: {
						show: false
					}
				},
				series: [
					{
						name: '订单金额',
						tooltip: {
							valueFormatter: value => '订单金额：' + value + '元'
						},
						data: this.amountData,
						type: 'line',
						smooth: true,
						lineStyle: {
							normal: {
								width: 3
							}
						}
					},
					{
						name: '订单笔数',
						tooltip: {
							valueFormatter: value => '订单笔数：' + value + '笔'
						},
						data: this.numberData,
						type: 'bar',
						barWidth: '40%',
						itemStyle: {
							opacity: 0.8
						}
					}
				]
			}
		},
	},
};
</script>

<style scoped>
.function-card {
	height: 93px;
	text-align: center;
	background: #fff;
}
</style>
